<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="cmn-Hans">

<head>
  <title>免费电影网站</title>
  {{template "admin/partials/html-head.html" .}}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">
    <!-- Main Header -->
    {{template "admin/partials/html-header.html" .}}
    <!-- Left side column. contains the logo and sidebar -->
    {{template "admin/partials/html-menu.html" .}}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          电影列表
        </h1>
        <ol class="breadcrumb">
          <li><a href="/admin/page/welcome"><i class="fa fa-dashboard"></i>首页</a></li>
          <li class="active">电影列表</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-xs-12">
            <div class="box">
              <!-- .box-header search-->
              <div class="box-header">
                <h3 class="box-title">注册用户可见</h3>
                <div class="search-box">
                  <form class="form-inline" onsubmit="return false">
                    <div class="form-group">
                      <label for="username">网站名:</label>
                      <input type="text" class="form-control" name="name" placeholder="网站名">
                    </div>
                    <div class="form-group">
                      <label for="mobile">网址:</label>
                      <input type="text" class="form-control" name="url" placeholder="网址">
                    </div>
                    <button type="submit" id="search" class="btn btn-default">搜索</button>
                    <button type="button" class="btn btn-primary h-add" data-toggle="modal"
                      data-target="#modal-default">添加</button>
                  </form>
                </div>
              </div>
              <!-- /.box-header search-->
              <div class="box-body">
                <table id="dataList" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>name</th>
                      <th>url</th>
                      <th>status</th>
                      <th>状态说明</th>
                      <th>创建时间</th>
                      <th>更新时间</th>
                      <th width="120px">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{/*<tr>
                      <td></td>
                    </tr>*/}}
                  </tbody>
                  <tfoot>
                    <tr>
                      <th>name</th>
                      <th>url</th>
                      <th>status</th>
                      <th>状态说明</th>
                      <th>创建时间</th>
                      <th>更新时间</th>
                      <th>操作</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.box-body -->
            </div>
            <!-- /.box -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    {{template "admin/partials/html-footer.html"}}

    <!-- Control Sidebar -->
    {{template "admin/partials/html-control-sidebar.html"}}
    <!-- /.Control-sidebar -->
  </div>
  <!-- ./wrapper -->

  <!-- 弹窗内容-->
  <div class="modal fade" id="modal-default">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">添加网站</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="box-body">
              <div class="form-group">
                <label for="name">网站名称</label>
                <input type="text" class="form-control" name="name" placeholder="name" autocomplete="off">
              </div>
              <!-- <div class="form-group">
								<label for="category">分类</label>
								<input type="text" class="form-control" name="category" placeholder="category"
									autocomplete="off">
							</div> -->
              <div class="form-group">
                <label for="url">url</label>
                <input type="text" class="form-control" name="url" placeholder="url" autocomplete="off">
              </div>
              <div class="form-group">
                <label for="url2">url2</label>
                <input type="text" class="form-control" name="url2" placeholder="url" autocomplete="off">
              </div>
              <div class="form-group">
                <label for="url3">url3</label>
                <input type="text" class="form-control" name="url3" placeholder="url" autocomplete="off">
              </div>
            </div>
            <!-- /.box-body -->
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary h-save">Save</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  <!-- /弹窗内容-->

  <!-- 弹窗内容-->
  <div id="update-dialog" style="display: none;">
    <div class="col-md-12">
      <!-- general form elements -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改网站</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <input type="hidden" id="movieId">
          <div class="box-body">
            <div class="form-group">
              <label for="name">网站名称</label>
              <input type="text" class="form-control" name="name" placeholder="name" autocomplete="off">
            </div>
            <!-- <div class="form-group">
							<label for="category">分类</label>
							<input type="text" class="form-control" name="category" placeholder="category"
								autocomplete="off">
						</div> -->
            <div class="form-group">
              <label for="url">url</label>
              <input type="text" class="form-control" name="url" placeholder="url" autocomplete="off">
            </div>
            <div class="form-group">
              <label for="url2">url2</label>
              <input type="text" class="form-control" name="url2" placeholder="url" autocomplete="off">
            </div>
            <div class="form-group">
              <label for="url3">url3</label>
              <input type="text" class="form-control" name="url3" placeholder="url" autocomplete="off">
            </div>
          </div>
          <!-- /.box-body -->
        </form>
      </div>
      <!-- /.box -->
    </div>
  </div>
  <!-- /.modal -->
  <!-- /弹窗内容-->

  <!-- REQUIRED JS SCRIPTS -->
  {{template "admin/partials/html-js.html"}}
  <!-- /REQUIRED JS SCRIPTS -->

  <!-- page script -->
  <script type="text/javascript">
    $(function () {
      //列表
      var dataList = $('#dataList').DataTable({
        language: {
          processing: "数据加载中……",
          zeroRecords: "No records to display"
        },
        paging: true,
        lengthChange: false,
        searching: false,
        ordering: true,
        info: true,
        scrollX: true,
        autoWidth: true,
        serverSide: true,
        processing: true,
        ajax: function (data, callback, settings) {
          var postData = {
            draw: data.draw,
            perPage: data.length,
            start: data.start,
            search: data.search.value
          };
          if ($(".search-box input[name=name]").val()) {
            postData.name = $(".search-box input[name=name]").val();
          }
          if ($(".search-box input[name=url]").val()) {
            postData.url = $(".search-box input[name=url]").val();
          }
          $.ajax({
            url: '/admin/api/movie-list',
            type: 'GET', //GET
            data: postData,
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
              console.log('发送前')
            },
            success: function (res, textStatus, jqXHR) {
              if (res.code == 1) {
                layer.msg(res.msg, { icon: 5 });
                return
              }
              var dtData = {
                recordsTotal: res.data.total,
                recordsFiltered: res.data.total,
                data: res.data.result || [],
                draw: res.data.draw
              };
              callback(dtData);
            },
            error: function (xhr, textStatus) {
              console.log('错误')
            },
            complete: function () {
              console.log('结束')
            }
          })
        },
        rowId: 'id',//自动设置行id
        columns: [
          // { data: 'id' },
          { data: 'name', width: '100px', searchable: true },
          {
            data: 'urls',
            render: function (data, type, row) {
              var html = '';
              data.forEach(element => {
                html += '<a href="' + element.url + '" target="_blank">' + element.url + '</a><br />';
              });
              return html;
            }
          },
          {
            data: 'urls',
            render: function (data, type, row) {
              let statusMap = {
                0: '<small class="label bg-green">正常</small>',
                1: '<small class="label bg-red">不能访问</small>',
                2: '<small class="label bg-orange">异常</small>',
              };
              var html = '';
              data.forEach(element => {
                html += statusMap[element.status] + '<br />';
              });
              return html;
            }
          },
          {
            data: 'urls',
            render: function (data, type, row) {
              var html = '';
              data.forEach(element => {
                html += element.statusCommnet + '<br />';
              });
              return html;
            }
          },
          {
            data: 'urls',
            render: function (data, type, row) {
              var html = '';
              data.forEach(element => {
                html += moment(element.created_at).format("YYYY-MM-DD HH:mm:ss") + '<br />';
              });
              return html;
            }
          },
          {
            data: 'urls',
            width: '200px',
            render: function (data, type, row) {
              var html = '';
              data.forEach(element => {
                html += moment(element.updated_at).format("YYYY-MM-DD HH:mm:ss") + '<br />';
              });
              return html;
            }
          },
          {
            data: 'name',
            render: function (data, type, row) {
              var html = '<a href="javascript:void(0);" class="J-update">修改</a>';
              html += '&nbsp;<a href="javascript:void(0);" class="J-delete">删除</a>';
              return html;
            }
          }
        ],
        "createdRow": function (row, data, dataIndex) {
          //有了DT_RowId属性就会自动添加id到行上,不需要在此操作，可以做其他事
          $(row).data("userName", data.userName);
        }
      });
      //搜索
      $("#search").on('click', function () {
        dataList.ajax.reload();
      })
      //删除
      $("#dataList").on("click", ".J-delete", function () {
        var id = $(this).closest("tr").attr("id");
        if (confirm("确定删除？")) {
          $.ajax({
            url: '/admin/api/movie/delete/' + id,
            type: 'delete', //GET
            async: true,    //或false,是否异步
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
              console.log('发送前')
            },
            success: function (data, textStatus, jqXHR) {
              if (data.code !== 0) {
                layer.msg(data.msg, { icon: 5 });
                return
              }
              layer.msg("删除成功！", { icon: 6 });
              dataList.ajax.reload();
            },
            error: function (xhr, textStatus) {
              console.log('错误')
            },
            complete: function () {
              console.log('结束')
            }
          })
        }
      });
      //保存
      $(".h-save").on("click", function () {
        var name = $("#modal-default input[name=name]").val();
        var url = $("#modal-default input[name=url]").val();
        var url2 = $("#modal-default input[name=url2]").val();
        var url3 = $("#modal-default input[name=url3]").val();
        $.ajax({
          url: '/admin/api/movie/add',
          type: 'post', //GET
          async: true,    //或false,是否异步
          data: {
            name: name,
            url: url,
            url2: url2,
            url3: url3
          },
          timeout: 5000,    //超时时间
          dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
          beforeSend: function (xhr) {
            console.log('发送前')
          },
          success: function (data, textStatus, jqXHR) {
            if (data.code !== 0) {
              layer.msg(data.msg, { icon: 5 });
              return
            }
            layer.msg("添加成功！", { icon: 6 });
            $(".pull-left").trigger("click");
            dataList.ajax.reload();
          },
          error: function (xhr, textStatus) {
            console.log('错误')
          },
          complete: function () {
            console.log('结束')
          }
        })
      });
      // 修改
      $("#dataList").on("click", ".J-update", function () {
        var id = $(this).closest("tr").attr("id");
        $.get("/admin/api/movie/" + id, function (data) {
          if (data.code !== 0) {
            layer.msg(data.msg, { icon: 5 });
            return
          }
          let urlArr = data.data.urls;
          $("#movieId").val(id);
          $("#update-dialog input[name=name]").val(data.data.name);
          $("#update-dialog input[name=url]").val(urlArr[0].url);
          $("#update-dialog input[name=url2]").val(urlArr[1]?.url);
          $("#update-dialog input[name=url3]").val(urlArr[2]?.url);
          layer.open({
            type: 1,
            area: ['500px', 'auto'],
            btn: ['确定', '取消'],
            fixed: false,//跟随滚动
            shadeClose: true, //点击遮罩关闭
            content: $("#update-dialog"),
            yes: function (index, layero) {
              var name = $("#update-dialog input[name=name]").val();
              var url = $("#update-dialog input[name=url]").val();
              var url2 = $("#update-dialog input[name=url2]").val();
              var url3 = $("#update-dialog input[name=url3]").val();
              $.ajax({
                url: '/admin/api/movie/update',
                type: 'put', //GET
                async: true,    //或false,是否异步
                data: {
                  id: id,
                  name: name,
                  url: url,
                  url2: url2,
                  url3: url3
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                  console.log('发送前')
                },
                success: function (data, textStatus, jqXHR) {
                  if (data.code !== 0) {
                    layer.msg(data.msg, { icon: 5 });
                    return
                  }
                  layer.msg("修改成功！", { icon: 6 });
                  layer.close(index); //如果设定了yes回调，需进行手工关闭
                  dataList.ajax.reload();
                },
                error: function (xhr, textStatus) {
                  console.log('错误')
                },
                complete: function () {
                  console.log('结束')
                }
              })
            }, btn2: function (index, layero) {
              layer.close(index);
            }
          });
        })
      });
    })
  </script>
</body>

</html>